<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件</title>
    <style>
        .title{color:red}
    </style>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>


    <!-- 引入react核心库 -->
    <script src="../js/16/react.development.js" ></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script src="../js/16/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="../js/babel.js" ></script>
    <script type="text/babel"> /*此处一定要写babel，否则无法识别jsx语法*/
    /**
     * 1.初始化阶段：由ReactDOM.render()触发---初次渲染
     *              1.constructor() 
     *              2.componentWillMount() 组件将要挂载
     *              3.render()
     *              4.componentDidMount() 组件已经挂载
     *                      ===>常用，一般在这个钩子中做一些初始化的事，例如：开启定时器发起网络请求，订阅消息
     * 2.更新阶段：由组件内部this.setState()或父组件重新render触发
     *              1.shouldComponentUpdate() 控制组件更新
     *              2.componentWillUpdate() 组件将要更新
     *              3.render()
     *              4.componentDidUpdate() 组件已经更新
     * 3.卸载组件：由ReactDOM.unmountComponentAtNode()触发
     *              1.componentWillUnmount() 组件将要卸载
     *                      ===>常用，一般在这个钩子中做一些收尾的事，例如：关闭定时器，取消订阅消息
     * 
     */
        // 父组件
        class A extends React.Component {
            state = { carName: '奔驰' }
            changeCar = () => {
                this.setState({ carName: '奥拓' })
            }
            render () {
                return (
                    <div>
                        <div>this is A component</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName} />
                    </div>
                )
            }
        }
        // 子组件
        class B extends React.Component {
            // 组件将要接受props的钩子,第一次接受的值不执行这个钩子
            componentWillReceiveProps (props) {
                console.log('B---componentWillReceiveProps', props) 
            }
            // 控制组件更新的钩子
            shouldComponentUpdate () {
                console.log('B---shouldComponentUpdate')
                return true
                // return false // 组件不在更新，render也不再调用

            }
            // 组件将要更新的钩子
            componentWillUpdate () {
                console.log('B---componentWillUpdate')
            }
            // 组件完成更新的钩子
            componentDidUpdate () {
                console.log('B---componentDidUpdate')
            }
            render () {
                console.log('B---render')
                return (
                    <div>this is B component,接收到的车是： {this.props.carName}</div>
                )
            }
        }
        ReactDOM.render(<A />, document.getElementById('test'))
    </script>
</body>
</html>